<script lang="ts" setup>
import type { WorkbenchTodoItem, WorkbenchTrendItem } from '@vben/common-ui';
import viewIem from './viewItem.vue';
import quickNav from './quickNav.vue';
import dayjs from 'dayjs';

import type { TabOption } from '@vben/types';
import { ref } from 'vue';

import {
  AnalysisChartCard,
  WorkbenchHeader,
  WorkbenchTodo,
  WorkbenchTrends,
  AnalysisChartsTabs,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';

import AnalyticsActivityType from './analytics-activity-type.vue';
import AnalyticsApplyStatus from './analytics-apply-status.vue';
import AnalyticsWelfare from './analytics-welfare.vue';
import AnalyticsStaffActivity from './analytics-staff-activity.vue';
import AnalyticsStaffWelfare from './analytics-staff-welfare.vue';

const userStore = useUserStore();

interface AnalysisOverviewItem {
  title: string;
  firstTitle: string;
  firstValue: number;
  secondTitle: string;
  secondValue: number;
}

interface quickNavItem {
  title: string;
  url: string;
}
const overviewItems: AnalysisOverviewItem[] = [
  {
    title: '活动模块',
    firstTitle: '进行中活动',
    firstValue: 5,
    secondTitle: '即将到期活动',
    secondValue: 2,
  },
  {
    title: '福利模块',
    firstTitle: '总福利数量',
    firstValue: 10,
    secondTitle: '可领取福利',
    secondValue: 4,
  },
  {
    title: '申请模块',
    firstTitle: '总申请数量',
    firstValue: 3,
    secondTitle: '处理中申请',
    secondValue: 2,
  },
];

const quickNavItems: quickNavItem[] = [
  {
    title: '首页',
    url: '/',
  },
  {
    title: '活动管理',
    url: '/activity/index',
  },
  {
    title: '福利管理',
    url: '/welfare/index',
  },
  {
    title: '申请管理',
    url: '/apply/index',
  },
];

const todoItems = ref<WorkbenchTodoItem[]>([
  {
    completed: false,
    content: `工会秋季登山活动，截止日期：2024年11月10日`,
    date: '2024-07-30 11:00:00',
    title: '待审核的活动',
  },
  {
    completed: true,
    content: `紧急医疗援助，提交日期：2024年11月5日。`,
    date: '2024-07-30 11:00:00',
    title: '待审批的申请',
  },
  {
    completed: false,
    content: `年度体检券，发布日期：2024年11月15日。 `,
    date: '2024-07-30 11:00:00',
    title: '待发布的福利',
  },
]);
const trendItems: WorkbenchTrendItem[] = [
  {
    avatar: 'svg:avatar-1',
    content: `报名了工会秋季登山活动`,
    date: '刚刚',
    title: '员工A',
  },
  {
    avatar: 'svg:avatar-2',
    content: `提交了困难帮扶申请 `,
    date: '1个小时前',
    title: '员工B',
  },
  {
    avatar: 'svg:avatar-3',
    content: `领取了餐饮优惠券 `,
    date: '1天前',
    title: '员工C',
  },
];
const chartTabs: TabOption[] = [
  {
    label: '福利发放情况',
    value: 'welfare',
  },
];

const staffTabs: TabOption[] = [
  {
    label: '员工参与活动情况',
    value: 'staff-activity',
  },
  {
    label: '员工领取福利情况',
    value: 'staff-welfare',
  },
];
const today = dayjs().format('YYYY-MM-DD');
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
      <template #title> 早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！ </template>
      <template #description>今天日期：{{ today }}，天气：20°C，晴 </template>
    </WorkbenchHeader>

    <viewIem :items="overviewItems" />

    <!-- <quickNav :items="quickNavItems" /> -->

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
      </div>
    </div>

    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/4" title="活动统计列表">
        <AnalyticsActivityType />
      </AnalysisChartCard>

      <AnalysisChartsTabs :tabs="chartTabs" class="mt-5 md:mr-4 md:mt-0 md:w-1/4">
        <template #welfare>
          <AnalyticsWelfare />
        </template>
      </AnalysisChartsTabs>

      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/4" title="申请状态图表">
        <AnalyticsApplyStatus />
      </AnalysisChartCard>

      <AnalysisChartsTabs :tabs="staffTabs" class="mt-5 md:mr-4 md:mt-0 md:w-1/4">
        <template #staff-activity>
          <AnalyticsStaffActivity />
        </template>
        <template #staff-welfare>
          <AnalyticsStaffWelfare />
        </template>
      </AnalysisChartsTabs>
    </div>
  </div>
</template>
